v<template>
  <div class="registerContainer">
      <!-- 顶部logo (现在改为拍照)-->
      <div class="topLogo" >
           <!-- <yd-icon @click.native="takePhoto" name="takePhoto"  custom slot="icon" size="100px" color='#ffffff'></yd-icon> -->
            <img :src="img"  @click="takePhoto" >
      </div>
    <yd-actionsheet  :items="myItems1" v-model=" showAct" cancel="取消"></yd-actionsheet>
      <!-- 注册 -->
      <div class="registerMain">
          <!-- 手机号 -->
          <div style="margin-left:-.05rem">
               <yd-icon name="pnum"  custom slot="icon"  size=".5rem"></yd-icon>
                <input placeholder="请输入手机号" type="number" max="99999999999" v-model="phoneNumber">
               <yd-sendcode slot="right" init-str="发送验证码" run-str="{%s}秒后重试" reset-str="重新获取" v-model="start" @click.native="sendCode" type="hollow" size="small"></yd-sendcode>
          </div>
          <!-- 短信验证码 -->
           <div>
               <yd-icon name="sure"  custom slot="icon"  size=".4rem"></yd-icon>
              <input placeholder="请输入短信验证码" maxlength="11" v-model="msgWord">
            </div>
            <!-- 密码    -->
            <div>
                <yd-icon name="pwd"  custom slot="icon"  size=".4rem"></yd-icon>
                <input type="password" class="pwdMain" readonly="readonly" placeholder="请设置您的密码" v-model="uPwd" @click="modelShow=true,firstPwd='',secondPwd=''">
                <span @click="eye($event)" style="margin-left: .4rem">
                    <yd-icon name="eye"  custom slot="icon"  size=".37rem" color="#ffffff"></yd-icon>
                </span>
            </div>
      </div>
    <!-- 注册 -->
    <button class="registerBtn" @click="doRegister">注册</button>
      <div class="back">
          <router-link to="/home">我已注册,返回登录</router-link>
      </div>
      <!-- 用户协议 -->
      <div class="protocol">
          <p><input type="checkbox" :checked='check' @click="check=!check"> 我已仔细阅<span class="userProtocol" @click="detailShow=true">《读用户协议》</span>，理解、同意相关条款</p>
      </div>
      <!-- 协议详情 -->
      <div class="protocolDetail" v-show='detailShow'>
          <div class="content"></div>
          <p class="btns">
               <button @click="agreeProtocol()">同意</button>
               <button @click="disagreeProtocol()">拒绝</button>
          </p>
      </div>
    <!--密码输入两次确认-->
      <div class="pwdContrast" v-show="modelShow">
        <!--关闭按钮-->
        <div class="topClose">
            <p @touchstart="modelShow=false,alertShow=false">
              <yd-icon name="pushBack"  custom slot="icon"  size=".4rem" color="#ffffff"></yd-icon>
            </p>
        </div>
        <!--密码输入确认框-->
        <div class="midContent" >
          <p class="title">密码输入验证</p>
          <p class="care">请注意两次密码输入必须保持一致</p>
          <div class="ipts">
            <div class="frist">
              <yd-icon name="pwd"  custom slot="icon"  size=".4rem" color="#ffffff"></yd-icon>
              <input type="password" class="pwdMain" placeholder="请设置您的密码" v-model="firstPwd">
              <span @click="eye($event)">
                    <yd-icon name="eye"  custom slot="icon"  size=".37rem" color="#ffffff"></yd-icon>
                </span>
            </div>
            <div class="sec">
              <yd-icon name="pwd"  custom slot="icon"  size=".4rem" color="#ffffff"></yd-icon>
              <input type="password" class="pwdMain" placeholder="请设置您的密码" v-model="secondPwd">
              <span @click="eye($event)" >
                    <yd-icon name="eye"  custom slot="icon"  size=".37rem" color="#ffffff"></yd-icon>
                </span>
            </div>
          </div>
          <!--错误提醒文字-->
          <div class="ylAlert" v-show="alertShow">
            <p> <yd-icon name="bulb"  custom slot="icon"  size="20px" color="#fce405"></yd-icon>提示：{{alertMsg}}</p>
          </div>
        </div>
        <!--提交按钮-->
        <button @click="pwdConfirm">提交</button>
      </div>
        <div class="crop" v-if="cropShow">
          <p  class="alert" v-show="!crop">图片加载中，请等待...</p>
          <vueCropper v-show="crop"
            ref="cropper"
            :info="false"
            :autoCrop="true"
            :img="option.img"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :canMoveBox="false"
            :fixedBox="true"
          ></vueCropper>
            <!-- 下方取消确认按钮 -->
           <div class="fot">
             <p @touchend="cancelCut">取消</p><p @touchend="cut">完成</p>
           </div>
        </div>
  </div>
</template>
<style lang="less" scoped>
 @import '~less/base';
 @import '~less/icon';
 .registerContainer{
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     overflow: scroll;
     background-color: @background-a;
     .topLogo{//上方logo部分(现在改为拍照)
         height: 5rem;
         line-height: 5rem;
         text-align: center;
         img{
           height: 2rem;
           width: 2rem;
           border-radius: 50%;
           margin-top:1.5rem;
           border: 2px solid #ffffff
         }
     }
   .yd-btn{
     font-size: .25rem;
     padding: 0;
   }
     .registerMain{//注册部分表单
        padding-left: .5rem;
          input{
            width: 4.3rem;
            border: none;
            border-bottom: 1px solid @color-border1;
            height: .6rem;
            line-height: .6rem;
            margin-top: .3rem;
            margin-bottom: .3rem;
            margin-right: .2rem;
            margin-left: .25rem  ;
            font-size: 16px;
            padding-left: .2rem;
        }
        button{//重置按钮样式
            background-color: transparent;
            border: none;
        }
     }
   .registerBtn{//注册按钮
     width:89%;
     margin-left: 4.75%;
     border: 1px solid @color-border2;
     height: 1rem;
     background-color: @color-btn1;
     border-radius: 5px;
     margin-top: .6rem;
     color: @color-btnFont;
     font-size: 18px;
     letter-spacing:10px
   }
   .registerBtn:active{
     background-color:#FFB36E
   }
     .back{//返回登录
        text-align: center;
        margin-top: .2rem;
        color: @color-c;
     }
     .protocol{//用户协议同意否
         margin-top: .5rem;
         text-align: center;
          .userProtocol{//用户协议
            color:red;
        }
     }
     .protocolDetail{//用户协议详情
         position: fixed;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         background-color: @background-a;
         padding-bottom: 1rem;
         overflow: scroll;
         .btns{//下方遮罩层
             position: fixed;
             bottom: 0;
             width: 100%;
             padding: .3rem;
             text-align: center;
             background-color: #ddd;
             button{//同意拒绝按钮
               border: none;
               width: 20%;
               color: @color-btnFont;
               background-color: @color-btn1;
               height: .6rem;
               line-height: .6rem;
               border-radius: 5px;
             }
             button:active{
               background-color:#FFB36E
             }
         }
     }
   .pwdContrast{//确认密码遮罩层
     position: fixed;
     top: 0;
     bottom: 0;
     width: 100%;
     background-color: @model-color-1;
     .topClose{
       height: 1rem;
       line-height: 1rem;
       p{//关闭按钮
         float: right;
         padding:0 .3rem;
       }
     }
     .midContent{//中间主要内容部分
       height: 7.5rem;
       width: 100%;
       .title{//标题
         margin-top: .6rem;
         height: 1.2rem;
         line-height: 1.2rem;
         color: @color-t2;
         text-align: center;
         font-size: 20px;
       }
       .care{//提醒消息
          height: .5rem;
          line-height: .5rem;
          text-align: center;
          font-size: 14px;
          color: @color-c;
       }
       .ipts{//输入框
          margin-top: .75rem;
          padding-left: .56rem;
         input{
           width: 4.3rem;
           border: none;
           border-bottom: 1px solid @color-border3;
           height: .6rem;
           line-height: .6rem;
           margin-top: .4rem;
           margin-bottom: .4rem;
           margin-right: .55rem;
           margin-left: .3rem  ;
           font-size: 16px;
           padding-left: .2rem;
           color:@color-c ;
         }
         input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit*/
           color:@color-c ;
         }
         input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
           color:@color-c ;
         }
         input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
           color:@color-c ;
         }
         input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ */
           color:@color-c ;
         }
       }
       .ylAlert{//错误提醒
         color: @color-t2 ;
         height: 1.4rem;
         line-height: 1.4rem;
         text-align: center;
         font-size: 14px;
         i{
           margin-right:.3rem;
         }
       }
     }
     button{//提交按钮
       margin-top: .6rem;
       width: 90%;
       margin-left: 5%;
       height: 1rem;
       line-height: 1rem;
       background-color: @color-btn1;
       color: @color-btnFont;
       font-size: 18px;
       letter-spacing: 5px;
       border-radius: 5px;
       outline: none;
       border: 1px solid  @color-border3;
     }
     button:active{
       background-color:#FFB36E;
     }
   }
   .crop{//图片裁剪界面
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: #000000;
      .vue-cropper{
        background: #000000;
      }
      .alert{
        font-size: 16px;
        color: @color-btnFont;
        position: absolute;
        width: 100%;
        top: 40%;
        text-align: center;
      }
      .fot{
        position: absolute;
        height: 1rem;
        width: 100%;
        bottom: 0;
        border-top: 1px solid @color-border6;
        p{//两按钮样式
          height: 1rem;
          width: 1.5rem;
          line-height: 1rem;
          font-size: 16px;
          color: @color-btnFont;
          text-align: center
        }
        p:nth-child(1){
          float: left;
        }
        p:nth-child(2){
          float: right;
        }
      }
   }
 }
</style>
<script>
import VueCropper from 'vue-cropper';
import base64 from '@/common/js/base/base64.js'
import { Indicator } from 'mint-ui';
export default {
  components:{VueCropper},
  data(){
      return{
          option:{
            img:'',
            outputType:'jpg',
            autoCropWidth:document.body.offsetWidth*.8 ,
				    autoCropHeight:document.body.offsetWidth *.8,
          },
          cropShow:false,
          start:false, //控制发送短信
          pwdStatus:true,//控制密码输入框类型
          detailShow:false,//用户协议详情显示
          check:false,//用户协议同意与否
          phoneNumber:'',//手机号码
          msgWord:'',//短信验证码
          userPassword:'',//密码
          showAct: false, //下方拍照弹出框
          firstPwd:'',//第一次输入密码
          secondPwd:'',//第二次输入密码
          uPwd:'',//最终密码
          modelShow:true,//密码确认模态框
          alertMsg:'',//提醒消息
          alertShow:false,//提醒消息显示隐藏
          img:require("./img/photo.png"),
          crop:false,//裁剪显示隐藏
          photoType:'',
          baseImg:'static/img/visiter.png',
          myItems1: [
            {
              label: '拍照',
              callback: () => {
                // this.$dialog.toast({mes: '咔擦，此人太帅！'});
                this.myCamera()
                /* 注意： callback: function() {} 和 callback() {}  这样是无法正常使用当前this的 */
              }
            },
            {
              label: '从相册中偷取',
              callback: () => {
                this.myGallery()
              }
            }
          ]
      }
  },
  watch:{
    img(newVal,oldVal){
      // console.log(this.img)
    }
  },
  methods:{
      cancelCut(){
        if(this.photoType==1){
          this.myCamera()
        }else if(this.photoType==2){
          this.myGallery()
        }
      },
      cut(){//裁剪图片
      //  this.$refs.cropper.getCropBlob((data) => {
      //       // do something
      //       let that=this;
      //        let reader    = new FileReader();
      //       reader.readAsDataURL(data)
      //       reader.onload = function(e) {
      //           that.img=e.target.result;
      //           console.log(e.target)
      //            that.aaa=e.target.result;
      //         }
      //       this.cropShow=false
      //       console.log(data)

          // })
      this.$refs.cropper.getCropData((data) => {
        // do something
        this.img=data;
        console.log(data)
        this.baseImg=data;
        this.cropShow=false
        this.crop=false
        // 打开loadng
        Indicator.open({
            text: '请等待...',
            spinnerType: 'fading-circle'
          });
          setTimeout(() => {
            Indicator.close()
          }, 2000);
      })
      },
     sendCode() {//短信倒计时
      let reg=/^[1][3,4,5,7,8][0-9]{9}$/;
      if(!reg.test(this.phoneNumber)){
        this.$dialog.alert({mes: '请输入正确手机号码'});
      }else{//通过正则才能发送短信
          this.$dialog.loading.open('发送中...');
          setTimeout(() => {
              this.start = true;
              this.$dialog.loading.close();
              this.$dialog.toast({mes: '已发送',icon: 'success',timeout: 1500});
          }, 1000);
      }

    },
    takePhoto(){//头像
       this.showAct=true
    },
    pwdConfirm(){//确认密码
       let reg=/^[0-9| A-Z | a-z]{6,16}$/;//密码正则
       if(reg.test(this.firstPwd)){//通过正则验证
             if(this.firstPwd===this.secondPwd&&this.firstPwd*this.secondPwd!=0){
                this.uPwd=this.firstPwd
                this.modelShow=false
                this.alertShow=false
              }else if(this.firstPwd*this.secondPwd==0){//如果密码为空出现提示
                this.alertShow=true
                this.alertMsg='密码不能为空，请重新输入密码'
              }else{
                this.alertShow=true
                this.alertMsg='两次密码输入不一致，请重新输入密码'
              }
       }else{
         this.$dialog.alert({mes: '请输入6-16位数字或字母'});
       }

    },
    myCamera(){//调用手机拍照
      var that=this
      that.photoType=1
      if(window.plus){
          plusReady();
        }else{
          document.addEventListener("plusready",plusReady,false);
        }
        var cmr = plus.camera.getCamera();
        var res = cmr.supportedImageResolutions[0];
        var fmt = cmr.supportedImageFormats[0];
            that.cropShow=true//裁剪遮罩层显示
          cmr.captureImage( function( path ){
            plus.io.resolveLocalFileSystemURL(path,function(entry){
               base64.compressImage(entry.toLocalURL())
               that.option.img=entry.toLocalURL()
               that.crop=true//裁剪显示

            })
            },
          function( error ) {
               that.cropShow=false
               that.crop=false
              console.log( "取消拍照" );
          },
          {resolution:res,format:fmt}
        );
    },
    myGallery(){//手机相册
          let that=this;
          that.photoType=2
           plus.gallery.pick( function(path){
    	         plus.io.resolveLocalFileSystemURL(path,function(entry){
                  // alert(entry.toLocalURL())
                  that.option.img=entry.toLocalURL()
                  that.cropShow=true
                  that.crop=true
                 that.img = entry.toLocalURL()
                })
            }, function ( e ) {
              that.cropShow=false
                  that.crop=false
              console.log( "取消选择图片" );
            }, {filter:"image"} );
    },
    eye(e){//查看密码
      if(e.currentTarget.previousElementSibling.type=="password"){
        e.currentTarget.previousElementSibling.type="text"
      }else {
        e.currentTarget.previousElementSibling.type="password"
      }
    },
    agreeProtocol(){//同意用户协议
        this.detailShow=false
        this.check=true
    },
     disagreeProtocol(){//拒绝用户协议提示
        this.$dialog.confirm({
                    mes: '拒绝本协议您将无法进行注册，您确认吗',
                    opts: () => {
                         this.check=false
                         this.detailShow=false
                    }
        });
    },
    doRegister(){//确认注册
        let data={
          mobilephone:this.phoneNumber,
          password:this.uPwd,
          verifyCode:this.msgWord,
          photo:this.baseImg
        }
        if(this.phoneNumber.length<11||this.phoneNumber.length==0){
           this.$dialog.alert({mes: '请输入正确手机号码'});
        }else if(this.msgWord.length==0){
           this.$dialog.alert({mes: '验证码不能为空'});
        }else if(this.uPwd.length==0){
           this.$dialog.alert({mes: '密码不能为空'});
        }else if(!this.check){
          this.$dialog.alert({mes:"您还未同意用户协议，不能进行注册"})
        }else{
           this.ylAjax.Regist(data)
            .then(res=>{
               if(res.state=="0"){
                 this.$store.commit("phonenumber",this.phoneNumber)
                 this.$store.commit("password",parseInt(this.uPwd).toString(36));
                 this.$router.push({path:'/home'})
               }else{
                  this.$dialog.alert({mes:res.message})
               }
            })
            .catch(error=>{
              throw error
            })
//          let server = 'http://182.151.105.165:16000/elderly/account/regist'
//          var task = plus.uploader.createUpload(server,
//            {method: "POST"}, function (t, status) { //上传完成
//              if (status == 200) {
//                let txt = JSON.parse(t.responseText);
//                console.log(t,txt)
//              } else {
//                plus.nativeUI.alert("上传失败：" + status + t);
//              }
//            },
//          );
//          task.addData('mobilephone',this.phoneNumber);
//          task.addData('password',this.uPwd);
//          task.addData('verifyCode',this.msgWord);
//          task.addFile(this.img,{key: 'file' + i, mime: 'file'});
//          console.log('123',this.img)
//          task.setRequestHeader("authorization", localStorage.userid + '_' + store.state.token);
//          task.start();
        }
    }
  },
  mounted(){//将图片转换base64
    setTimeout(()=>{
      this.modelShow=false
    },100);
      let image = new Image();
      image.src = this.baseImg;
      image.onload = function(){
          var base = base64.getBase64Image(image);
          this.img=base
      }
  }
}
</script>
